<div class="input-row">
    <div class="label-column">
        <label class="col-form-label">Authentication</label>
    </div>
    <div class="input-column auth-input">
        <select class="form-select" value.bind="authType">
            <option value="password" if.bind="passwordOnly">Password</option>
            <option value="userAndPassword" if.bind="!passwordOnly">User &amp; Password</option>
            <option value="none">No auth</option>
        </select>
    </div>
</div>
<div class="input-row" if.bind="authType === 'userAndPassword'">
    <div class="label-column">
        <label class="col-form-label">User</label>
    </div>
    <div class="input-column auth-input">
        <input type="text" class="form-control" value.bind="connection.userId" spellcheck="false"/>
    </div>
</div>
<div class="input-row" if.bind="authType !== 'none'">
    <div class="label-column">
        <label class="col-form-label">Password</label>
    </div>
    <div class="input-column auth-input">
        <input type="password"
               class="form-control"
               value.bind="unprotectedPassword"
               blur.trigger="unprotectedPasswordEntered()"
               placeholder="<hidden>"/>
    </div>
</div>
